<template>
  <div class="e-wrap">
    <div class="position-panel">
      <w-form-validate @on-validate="addChannel">
        <div class="e-item">
          <span class="title">频道标题</span>
          <div class="dis-block">
              <w-input v-model='params.chName' :holder="`请填写`" rule="isEmpty" error="*此项必填"></w-input>
          </div>
        </div>
        <div class="e-item">
          <span class="title">频道导航样式</span>
          <div class="dis-block">
              <!-- <w-input v-model='params.chNavStyle' :holder="`请填写`"></w-input> -->
            <w-select :options='navStyle' v-model='params.chNavStyle'></w-select>
          </div>
          <em>系统默认3种风格：pink(粉红色),blue(蓝色),brown(灰色)</em>
        </div>
        <!-- <div class="e-item">
          <span class="title">所属行业</span>
          <div class="dis-block">
              <w-select v-model=params.tradeId></w-select>
          </div>
        </div> -->
        <div class="e-item">
          <span class="title">终端</span>
          <div class="dis-block">
            <w-select :defaultSe='false' :options='terminal' v-model='params.terminal' @on-select='changeTerminal'></w-select>
          </div>
        </div>
        <!-- <div class="e-item">
          <span class="title" style="vertical-align:top;margin-top: 10px;">图标</span>
          <div class="dis-block" >
            <div class="imgBox">
              <img :src="params.iconPath" alt="">
            </div>
            <input type="file" ref="imgInput" @change="changeImg" accept='image/*' style="display: none;">
            <button type='button' class="browse" @click="chooseImg">浏览</button>
          </div>
        </div> -->
        <uploadImg :title='`图标`' :imgSrc='params.iconPath' :type='`channel`' @on-img='getChannelImg'></uploadImg>
        <!-- <div class="e-item">
          <span class="title">频道位置</span>
          <div class="dis-block">
            <span>
              <w-radio :label='`homepage`' name='position' v-model="params.location">首页</w-radio>
            </span>
            <w-radio :label='`channel`' name='position' v-model="params.location">频道</w-radio>
          </div>
        </div> -->
        <div class="e-item">
          <span class="title">排序</span>
          <div class="dis-block">
            <w-input v-model='params.chSequence' :holder='`请填写`' rule="isEmpty" error="*此项必填"></w-input>
          </div>
          <em>序号越小越靠前</em>
        </div>
        <div class="e-item">
          <span class="title">绑定banner编号</span>
          <div class="dis-block">
            <w-select :options='adsList' v-model='params.advPosId'></w-select>
          </div>
        </div>
        <div class="e-item">
          <span class="title">内边框颜色</span>
          <div class="dis-block" style="padding-top: 6px;">
            <!-- <w-input v-model='params.colorInner'  :holder='`请填写`'></w-input> -->
            <colorPicker v-model="params.colorInner" @change="onChangeColor"></colorPicker>
          </div>
        </div>
        <div class="e-item">
          <span class="title">外边框颜色</span>
          <div class="dis-block" style="padding-top: 6px;">
            <!-- <w-input  v-model='params.colorMargin' :holder='`请填写`'></w-input> -->
            <colorPicker v-model="params.colorMargin" @change="changeMarginColor"></colorPicker>
          </div>
        </div>
        <!-- 按钮 -->
        <div class='submit-btn'>
          <button type="submit" class="btn">提交</button>
          <button class="btn colse" @click.prevent="$router.go(-1)">取消</button>
          <!-- <w-button @on-click='addChannel'>提交</w-button> -->
        </div>
      </w-form-validate>
    </div>
  </div>
</template>

<script>
import colorPicker from '../classifyMange/components/colorPicker'
import uploadImg from '../homeDecorate/components/uploadImg'
import { apiDecorateMange } from 'js/api'
import { mapGetters } from 'vuex'

export default {
  data() {
    return {
      // 终端
      terminal: [
        {
          value: 'MOBILE',
          label: 'app端'
        },
        {
          value: 'PC',
          label: 'pc端'
        }
      ],
      // 导航样式
      navStyle: [
        {
          value: 'pink',
          label: 'pink'
        },
        {
          value: 'blue',
          label: 'blue'
        },
        {
          value: 'brown',
          label: 'brown'
        }
      ],
      params: {
        // token信息
        accessToken: '',
        threeMenuCode: this.$route.query.three || '',
        id: Number(this.$route.query.id) || '',
        chName: '',
        chNavStyle: '',
        terminal: this.$route.query.terminal || '',
        chSequence: '',
        // location: 'channel',
        advPosId: '',
        colorInner: '',
        colorMargin: '',
        iconPath: ''
      },
      // 编辑时，获取频道信息
      queryParams: {
        accessToken: '',
        threeMenuCode: this.$route.query.three || '',
        id: Number(this.$route.query.id)
      },
      // 查询广告位列表 -- 参数
      queryAds: {
        accessToken: '',
        threeMenuCode: this.$route.query.three || '',
        currentPage: 1,
        showCount: 99
      },
      adsList: []
    }
  },
  computed: {
    ...mapGetters(['token'])
  },
  components: {
    colorPicker,
    uploadImg
  },
  created() {
    this._getAdvertList(this.$route.query.terminal)
    if (this.$route.query.id) {
      this._getChannelInfo()
    }
  },
  methods: {
    getChannelImg(src) {
      this.params.iconPath = src
    },
    onChangeColor(color) {
      this.params.colorInner = color
    },
    changeMarginColor(color) {
      this.params.colorMargin = color
    },
    changeTerminal() {
      this.params.advPosId = ''
      this._getAdvertList(this.params.terminal)
    },
    // 获取广告位 列表（去掉app首页/pc首页 两个广告位）
    _getAdvertList(termianl) {
      const par = {
        accessToken: this.token,
        threeMenuCode: this.$route.query.three,
        apLocation: termianl || '',
        currentPage: 1,
        showCount: 99
      }
      apiDecorateMange.getAdsList(par).then(data => {
        let list = data.data.recordList || {}
        list = list.filter(item => {
          return item.apStatus == '1'
        })
        this.adsList = list.map(val => {
          return {
            value: val.id,
            label: val.apTitle
          }
        })
        for (let i = 0; i < this.adsList.length; i++) {
          if (this.adsList[i].value == '-1' || this.adsList[i].value == '-2') {
            this.adsList.splice(i, 1)
            i--
          }
        }
      })
    },
    // 获取频道 信息
    _getChannelInfo() {
      this.queryParams.accessToken = this.token
      apiDecorateMange.getChannelInfo(this.queryParams).then(data => {
        if (data.code != 200) return
        const req = data.data.channelInfo
        this.params.chName = req.chName || ''
        this.params.chNavStyle = req.chNavStyle || ''
        this.params.terminal = req.terminal || ''
        this.params.chSequence = req.chSequence || ''
        // this.params.location = req.location
        this.params.advPosId = req.advPosId
        this.params.colorInner = req.colorInner ? '#' + req.colorInner : ''
        this.params.colorMargin = req.colorMargin ? '#' + req.colorMargin : ''
        this.params.iconPath = req.iconPath
      })
    },
    // 新增/编辑 频道
    addChannel() {
      this.params.accessToken = this.token
      if (!this.params.terminal) {
        this.$toast('请选择终端')
        return
      }
      if (!this.params.iconPath) {
        this.$toast('请上传图标')
        return
      }
      if (!this.params.advPosId) {
        this.$toast('请选择banner编号')
        return
      }
      this.params.colorInner = this.params.colorInner.substring(1)
      this.params.colorMargin = this.params.colorMargin.substring(1)
      apiDecorateMange.addChannel(this.params).then(rs => {
        if (rs && rs.code != 200) return
        this.$toast(`${this.$route.query.id ? '修改' : '新增'}成功`, () => {
          this.$router.go(-1)
        })
      })
    }
  }
}
</script>

<style lang='scss' scoped>
@import '../../scss/_var.scss';
@import '../../scss/_comment.scss';
.position-panel {
  margin: 0 auto;
  height: 700px;
  .e-item {
    display: block;
    width: 405px;
    margin: 0 auto 20px;
    .title {
      width: 106px;
      font-size: 14px;
    }
    .dis-block {
      width: 284px;
      vertical-align: middle;
      span {
        width: 120px;
        display: inline-block;
      }
    }
    .imgBox {
      display: inline-block;
      width: 54px;
      height: 54px;
      border: 1px solid #f7f7f7;
    }
    em {
      display: block;
      color: $color-main;
      font-size: 10px;
      margin-top: 6px;
      text-align: right;
    }
  }
}
.submit-btn {
  text-align: center;
  margin-top: 20px;
  button {
    width: 90px !important;
  }
}
</style>
